import { useState } from "react";
import ProForm, {
  ProFormSelect,
  ProFormText,
  ProFormDependency,
} from "@ant-design/pro-form";
import { UploadOutlined } from "@ant-design/icons";
import { fetchList, add, update, remove } from "@/services/friction";
import { Button, message } from "antd";
import { history } from "umi";
import useCommonTable from "@/hooks/useCommonTable";
import useRemove from "@/hooks/useRemove";
import { typeOptions, filterUpType } from "@/const";
import UploadExcel from "./components/UploadExcel";
import { exportToExcel } from "@/xlsx";

export default () => {
  const columns = [
    {
      title: "序号",
      dataIndex: "index",
      valueType: "index",
      width: 50,
    },
    {
      title: "数据名称",
      dataIndex: "name",
    },
  ];

  const renderFormItem = ({ type, formRef }) => {
    return (
      <>
        <ProFormText
          label="数据名称"
          name="name"
          rules={[{ required: true, message: "请输入名称" }]}
        />
        <ProForm.Item
          label="文件"
          name="frictionPerformanceDataDTOS"
          rules={[{ required: true, message: "请上传文件" }]}
        >
          <UploadExcel />
        </ProForm.Item>
      </>
    );
  };

  return (
    <>
      {useCommonTable({
        customTitle: "新增数据",
        onlyTitle: true,
        columns,
        renderFormItem,
        modalWidth: "40%",
        fetchList,
        add,
        update,
        remove,
        actionColumnWidth: 240,
        showCheckbox: false,
        renderOtherAction: (_, record) => {
          return (
            <Button
              className="my-detail-btn"
              style={{ margin: "0 14px" }}
              type="text"
              onClick={() => {
                history.push(`/friction/detail?id=${record.id}`);
              }}
            >
              查看
            </Button>
          );
        },
        // renderAction: (_, record, renderModalForm, actionRef) => {
        //   return (
        //     <div style={{ display: "flex" }}>
        //       {useRemove(remove, record, actionRef)}
        //       <Button
        //         className="my-detail-btn"
        //         style={{ margin: "0 14px" }}
        //         type="text"
        //         onClick={() => {
        //           history.push(`/friction/detail?id=${record.id}`);
        //         }}
        //       >
        //         查看
        //       </Button>
        //     </div>
        //   );
        // },
      })}
    </>
  );
};
